<template>
  <div class="verification">
    <x-header>检定录入
      <a href="javascript:;" class="save" @click="saveAction(type)">保存</a>
		  <a href="javascript:;" class="submit" @click="submitAction">提交</a>
    </x-header>
    <div class="paySearchContent">
      <div class="inspection">
        <div class="information-item equipment-item inspection-item">
          <img  class="information-item-leftImg" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
          <div class="information-item-title">表具信息</div>
        </div>
        <div class="information-item">
          <div class="information-item-title">出场编号</div>
          <popup-picker class="information-item-input" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
          <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
        </div>
        <div class="information-item">
          <div class="information-item-title">上次示数</div>
          <input class="information-item-input" type="text" maxlength="16" placeholder="请录入" value="890">
        </div>
        <div class="information-item">
          <div class="information-item-title">本次示数</div>
          <input class="information-item-input" v-model="THIS_READ" type="text" maxlength="16" placeholder="请录入" value="">
          <img class="information-item-icon" src="../../assets/img/securityCheckImg/sao.png" alt="">
        </div>
        <div class="information-item">
          <div class="information-item-title">上次维修日期</div>
          <input class="information-item-input" type="text" maxlength="16" placeholder="请录入" value="890">
        </div>
        <div class="information-item">
          <div class="information-item-title">上次维修内容</div>
          <input class="information-item-input" type="text" maxlength="16" placeholder="请录入" value="890">
        </div>
        <div class="information-item equipment-item inspection-item">
          <img  class="information-item-leftImg" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
          <div class="information-item-title">检定情况</div>
        </div>
        <div class="information-item">
          <div class="information-item-title">检测类型</div>
          <popup-picker class="information-item-input" :data="CENS_STYLE_LIST" show-name v-model="CENS_STYLE" @on-change="onChange($event,'CENS_STYLE')" placeholder="请选择"></popup-picker>
          <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
        </div>
        <div class="information-item">
          <div class="information-item-title">检测形式</div>
          <popup-picker class="information-item-input" :data="VERIFY_TYPE_LIST" show-name v-model="VERIFY_TYPE" @on-change="onChange($event,'VERIFY_TYPE')" placeholder="请选择"></popup-picker>
          <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
        </div>
        <div class="information-item" v-for="(item, index) in verifyInfoList" :key="'verifyInfoList'+index">
          <div class="information-item-title">{{item.name}}</div>
          <input class="information-item-input" v-model="item.inputValue" type="text" maxlength="16" placeholder="请录入" value="">
        </div>
        <div class="information-item">
          <div class="information-item-title">检定结果</div>
          <div class="information-item-radio inspection-item-radio information-item-input">
            <label class="information-item-radio-y">
              <input type="radio" name="radio1" value="01" @change="bindRadio">
              <img class="information-item-radio-icon" src="../../assets/img/securityCheckImg/unselected.png" alt="" v-if="radioShowY">
              <img class="information-item-radio-icon" src="../../assets/img/securityCheckImg/selected.png" alt="" v-else>
              <div class="information-item-radio-text">合格</div>
            </label>
            <label class="information-item-radio-n">
              <input type="radio" name="radio1" value="02" @change="bindRadio">
              <img class="information-item-radio-icon" src="../../assets/img/securityCheckImg/unselected.png" alt="" v-if="radioShowN">
              <img class="information-item-radio-icon" src="../../assets/img/securityCheckImg/selected.png" alt="" v-else>
              <div class="information-item-radio-text">不合格</div>
            </label>
          </div>
        </div>
        <div class="information-item equipment-item inspection-item">
          <img  class="information-item-leftImg" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
          <div class="information-item-title">检查明细</div>
        </div>
        <div class="equipment-checkbox">
          <label class="checkbox-label-item" v-for="(item,index) in checkboxList" :key="index">
            <input type="checkbox" name="checkbox" value="0" @change="bindCheckBox($event, item)">
            <img class="information-item-radio-icon" src="../../assets/img/securityCheckImg/unselected.png" alt="" v-if="item.checked">
            <img class="information-item-radio-icon" src="../../assets/img/securityCheckImg/selected.png" alt="" v-else>
            <div class="information-item-radio-text checkbox-label-item-text">{{item.name}}</div>
          </label>
        </div>
        <div class="information-item equipment-item inspection-item">
          <img  class="information-item-leftImg" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
          <div class="information-item-title">远传表信息</div>
        </div>
        <div class="information-item">
          <div class="information-item-title">读数</div>
          <input class="information-item-input" v-model="REMOTE_READ" type="text" maxlength="16" placeholder="请录入" value="">
        </div>
        <div class="information-item">
          <div class="information-item-title">电量/电压</div>
          <input class="information-item-input" v-model="REMOTE_LEVEL" type="text" maxlength="16" placeholder="请录入" value="">
        </div>
        <div class="information-item">
          <div class="information-item-title">状态</div>
          <popup-picker class="information-item-input" :data="REMOTE_STAT_LIST" show-name v-model="REMOTE_STAT" @on-change="onChange($event,'REMOTE_STAT')" placeholder="请选择"></popup-picker>
          <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
        </div>
        <div class="information-item equipment-item inspection-item">
          <img  class="information-item-leftImg" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
          <div class="information-item-title">防盗装置信息</div>
          <img class="information-item-icon inspection-item-icon" src="../../assets/img/securityCheckImg/add.png" alt="">
        </div>
        <div class="information-item inspection-popupPicker">
          <div class="popupPicker-item">
            <popup-picker class="popupPicker-item-popup" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
            <!-- <img class="popupPicker-item-icon" src="../../assets/img/securityCheckImg/selectB.png" alt=""> -->
          </div>
          <input class="popupPicker-item-input" type="text" maxlength="16" placeholder="请录入" value="">
          <div class="popupPicker-item-image">
            <img class="popupPicker-item-saoIcon" src="../../assets/img/securityCheckImg/sao.png" alt="">
          <img class="popupPicker-item-delIcon" src="../../assets/img/securityCheckImg/deleteData.png" alt="">
          </div>
        </div>
        <div class="information-item inspection-popupPicker">
          <div class="popupPicker-item">
            <popup-picker class="popupPicker-item-popup" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
            <!-- <img class="popupPicker-item-icon" src="../../assets/img/securityCheckImg/selectB.png" alt=""> -->
          </div>
          <input class="popupPicker-item-input" type="text" maxlength="16" placeholder="请录入" value="">
          <div class="popupPicker-item-image">
            <img class="popupPicker-item-saoIcon" src="../../assets/img/securityCheckImg/sao.png" alt="">
          <img class="popupPicker-item-delIcon" src="../../assets/img/securityCheckImg/deleteData.png" alt="">
          </div>
        </div>
        <div class="information-item inspection-popupPicker">
          <div class="popupPicker-item">
            <popup-picker class="popupPicker-item-popup" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
            <!-- <img class="popupPicker-item-icon" src="../../assets/img/securityCheckImg/selectB.png" alt=""> -->
          </div>
          <input class="popupPicker-item-input" type="text" maxlength="16" placeholder="请录入" value="">
          <div class="popupPicker-item-image">
            <img class="popupPicker-item-saoIcon" src="../../assets/img/securityCheckImg/sao.png" alt="">
          <img class="popupPicker-item-delIcon" src="../../assets/img/securityCheckImg/deleteData.png" alt="">
          </div>
        </div>
        <div class="information-item inspection-popupPicker">
          <div class="popupPicker-item">
            <popup-picker class="popupPicker-item-popup" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
            <!-- <img class="popupPicker-item-icon" src="../../assets/img/securityCheckImg/selectB.png" alt=""> -->
          </div>
          <input class="popupPicker-item-input" type="text" maxlength="16" placeholder="请录入" value="">
          <div class="popupPicker-item-image">
            <img class="popupPicker-item-saoIcon" src="../../assets/img/securityCheckImg/sao.png" alt="">
          <img class="popupPicker-item-delIcon" src="../../assets/img/securityCheckImg/deleteData.png" alt="">
          </div>
        </div>
        <div class="information-item inspection-popupPicker">
          <div class="popupPicker-item">
            <popup-picker class="popupPicker-item-popup" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
            <!-- <img class="popupPicker-item-icon" src="../../assets/img/securityCheckImg/selectB.png" alt=""> -->
          </div>
          <input class="popupPicker-item-input" type="text" maxlength="16" placeholder="请录入" value="">
          <div class="popupPicker-item-image">
            <img class="popupPicker-item-saoIcon" src="../../assets/img/securityCheckImg/sao.png" alt="">
          <img class="popupPicker-item-delIcon" src="../../assets/img/securityCheckImg/deleteData.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { XHeader, PopupPicker } from "vux";
// import verification from "@/components/verificationEntry/verificationComponents"
import Vue from "vue";
import { getsn } from "@/utils/getsn";
import { UserInfo } from "@/utils/public";
import {
  sqlEntryInsert,
  sqlEntryUpdata,
  sqlEntryDelete,
  submiEntryTremoval
} from "@/utils/sqlEntry";
export default {
  data() {
    return {
      value1: ["居民"],
      title1: "手机机型",
      list1: [
        ["小米1", "iPhone1", "华为1", "情怀1", "三星1", "其他1", "不告诉你1"]
      ],
      M_CID: "",
      CONS_NO: "",
      APP_NO:"",
      radioShowY: true,
      radioShowN: true,
      checkboxList: [],
      checkedList: [],
      verifyInfoList: [],
      isExistence_type: 1,
      REMOTE_READ: "",
      REMOTE_LEVEL: "",
      CENS_STYLE: [], //检测类型
      CENS_STYLE_LIST: [],
      VERIFY_TYPE: [], //检测形式
      VERIFY_TYPE_LIST: [],
      REMOTE_STAT: [], //远传设备状态
      REMOTE_STAT_LIST: [],
      VERIFY_CONC: "", //检定结果
      type: 1,
      THIS_READ: ""
    };
  },
  components: {
    XHeader,
    PopupPicker
  },
  methods: {
    bindRadio(e) {
      console.log(e.target.value);
      if (e.target.value == "02") {
        Vue.set(this, "radioShowY", true);
        Vue.set(this, "radioShowN", false);
      } else {
        Vue.set(this, "radioShowY", false);
        Vue.set(this, "radioShowN", true);
      }
      Vue.set(this, "VERIFY_CONC", e.target.value);
    },
    bindCheckBox(event, item) {
      item.checked = !event.target.checked;
      let checkArr = [];
      for (let i in this.checkboxList) {
        if (this.checkboxList[i].checked == false) {
          checkArr.push(this.checkboxList[i]);
        }
      }
      Vue.set(this, "checkedList", checkArr);
      console.log(this.checkedList);
    },
    onChange(val, str) {
      console.log("val change", val);
      switch (str) {
        case "CENS_STYLE":
          this.CENS_STYLE = val;
          break;
        case "VERIFY_TYPE":
          this.VERIFY_TYPE = val;
          break;
        case "REMOTE_STAT":
          this.REMOTE_STAT = val;
          break;
        default:
          break;
      }
    },
    saveAction(type) {
      console.log("保存", getsn());
      const _this = this;
      let M_CID = "";
      Vue.set(this, "type", type);
      console.log(11111111111, this.type);
      console.log(11111111111, this.isExistence_type);
      if (this.isExistence_type == 2) {
        M_CID = this.M_CID;
      } else {
        M_CID = getsn();
      }
      // 检定内容
      let VerifyInfoData = this.verifyInfoList.map(item => {
        return {
          VERIFY_RST_ID: "",
          VERIFY_ID: "",
          ORG_NO: UserInfo.ORG_NO,
          VERIFY_ITEM: item.value,
          VERIFY_REQ: item.inputValue,
          ITEM_TYPE: "01",
          M_CID: M_CID
        };
      });
      // 检定明细
      let VerifyItemData = this.checkedList.map(item => {
        return {
          VERIFY_RST_ID: "",
          VERIFY_ID: "",
          ORG_NO: UserInfo.ORG_NO,
          VERIFY_ITEM: item.value,
          VERIFY_REQ: item.name,
          ITEM_TYPE: "02",
          M_CID: M_CID
        };
      });
      const data = [
        {
          CONS_NO: this.CONS_NO,
          CHANGE_TYPE: type == 2 ? "3" : this.isExistence_type == 2 ? "2" : "1",
          M_CID: M_CID,
          THIS_READ: this.THIS_READ,

          VERIFY_RST_ID: "",
          ORG_NO: UserInfo.ORG_NO,
          ACPT_BUSI_TYPE: "", //业务类型
          APP_NO: this.APP_NO,
          CONS_ID: "",
          GM_ID: "",
          CENS_STYLE: this.CENS_STYLE[0],
          CENS_TIME: "",
          CENS_PER: "",
          CENS_ORG: "",
          VERIFY_TYPE: this.VERIFY_TYPE[0],
          VERIFY_ORG: "",
          VERIFY_DATE: "",
          VERIFY_CONC: this.VERIFY_CONC,
          REMARK: "",
          REMOTE_READ: this.REMOTE_READ,
          REMOTE_LEVEL: this.REMOTE_LEVEL,
          REMOTE_STAT: this.REMOTE_STAT[0]
        }
      ];
      console.log(data);
      console.log(this.isExistence_type);
      if (this.isExistence_type == 2) {
        sqlEntryUpdata("D_CHK_INFO", M_CID, data, this.callback);
        sqlEntryDelete("CHK_DTL_INFO", M_CID, function(str, msg) {
          console.log(str, msg);
        });
        sqlEntryInsert(
          "CHK_DTL_INFO",
          VerifyItemData.concat(VerifyInfoData),
          function(str, msg) {
            _this.$vux.toast.text("修改成功");
          }
        );
      } else {
        sqlEntryInsert("D_CHK_INFO", data, this.callback);
        sqlEntryInsert(
          "CHK_DTL_INFO",
          VerifyItemData.concat(VerifyInfoData),
          this.callback
        );
      }
    },
    submitAction() {
      console.log("提交");
      const M_CID = getsn();
      // 检定内容
      let VerifyInfoData = this.verifyInfoList.map(item => {
        return {
          VERIFY_RST_ID: "",
          VERIFY_ID: "",
          ORG_NO: UserInfo.ORG_NO,
          VERIFY_ITEM: item.value,
          VERIFY_REQ: item.inputValue,
          ITEM_TYPE: "01",
          M_CID: M_CID
        };
      });
      // 检定明细
      let VerifyItemData = this.checkedList.map(item => {
        return {
          VERIFY_RST_ID: "",
          VERIFY_ID: "",
          ORG_NO: UserInfo.ORG_NO,
          VERIFY_ITEM: item.value,
          VERIFY_REQ: item.name,
          ITEM_TYPE: "02",
          M_CID: M_CID
        };
      });
      const data = [
        {
          CONS_NO: this.CONS_NO,
          CHANGE_TYPE: "3",
          M_CID: M_CID,
          THIS_READ: this.THIS_READ,
          VERIFY_RST_ID: "",
          ORG_NO: UserInfo.ORG_NO,
          ACPT_BUSI_TYPE: "", //业务类型
          APP_NO: this.APP_NO,
          CONS_ID: "",
          GM_ID: "",
          CENS_STYLE: this.CENS_STYLE[0],
          CENS_TIME: "",
          CENS_PER: "",
          CENS_ORG: "",
          VERIFY_TYPE: this.VERIFY_TYPE[0],
          VERIFY_ORG: "",
          VERIFY_DATE: "",
          VERIFY_CONC: this.VERIFY_CONC,
          REMARK: "",
          REMOTE_READ: this.REMOTE_READ,
          REMOTE_LEVEL: this.REMOTE_LEVEL,
          REMOTE_STAT: this.REMOTE_STAT[0],
          CHK_DTL_INFO: VerifyItemData.concat(VerifyInfoData)
        }
      ];
      submiEntryTremoval(data, "RMD043", this.submitCallback);
    },
    callback(str, msg) {
      console.log(str, msg);
      if (msg.resultCode == "9999") {
        if (this.type == 2) {
          this.$vux.toast.text("提交成功");
        } else {
          if (str == "sqlUpdata") {
            this.$vux.toast.text("修改成功");
          } else {
            this.$vux.toast.text("添加成功");
          }
        }
      }
    },
    submitCallback(result) {
      console.log(result);
      this.saveAction(2);
    },
    getCHK_DTL_INFO(m_cid) {
      console.log(2222, m_cid);
      const _this = this;
      AndroidApi.queryTableData(
        JSON.stringify({
          whereClause: "select * from CHK_DTL_INFO where M_CID = ?",
          whereArgs: [m_cid]
        }),
        function(msg) {
          if (msg.resultCode === "9999") {
            if (msg.result.length > 0) {
              let verifyInfoList = [],
                checkboxList = [];
              for (let i in msg.result) {
                if (msg.result[i].ITEM_TYPE == "01") {
                  verifyInfoList.push(msg.result[i]);
                } else {
                  checkboxList.push(msg.result[i]);
                }
              }
              const verifyInfoListArr = verifyInfoList.map(item => {
                for (let i in _this.verifyInfoList) {
                  if (_this.verifyInfoList[i].value == item.VERIFY_ITEM) {
                    item.VERIFY_ITEM_NAME = _this.verifyInfoList[i].name;
                  }
                }
                return {
                  name: item.VERIFY_ITEM_NAME,
                  value: item.VERIFY_ITEM,
                  inputValue: item.VERIFY_REQ
                };
              });
              for (let i in _this.checkboxList) {
                for (let j in checkboxList) {
                  if (
                    _this.checkboxList[i].value == checkboxList[j].VERIFY_ITEM
                  ) {
                    _this.checkboxList[i].checked = false;
                  }
                }
              }
              console.log(55555, _this.checkboxList);
              Vue.set(_this, "verifyInfoList", verifyInfoListArr);
              Vue.set(_this, "checkboxList", _this.checkboxList);
              let checkArr = [];
              for (let i in _this.checkboxList) {
                if (_this.checkboxList[i].checked == false) {
                  checkArr.push(_this.checkboxList[i]);
                }
              }
              console.log(66666666, checkArr);
              Vue.set(_this, "checkedList", checkArr);
            }
          }
        }
      );
    }
  },
  mounted() {
    const _this = this;
    Vue.set(_this, "CONS_NO", localStorage.getItem("CONS_NO"));
    Vue.set(_this, "APP_NO", localStorage.getItem("APP_NO"));
    console.log(this.CONS_NO);
    // 检定明细
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["mdmVerifyItem"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          console.log("查询成功", msg);
          if (msg.result.length != 0) {
            const checkboxList = msg.result.map(item => {
              return {
                name: item.CODE_NAME,
                value: item.CODE_VALUE,
                checked: true
              };
            });
            Vue.set(_this, "checkboxList", checkboxList);
            console.log(_this.checkboxList);
          } else {
            Vue.set(_this, "checkboxList", []);
          }
        }
      }
    );
    // 检定内容信息
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["mdmVerifyInfo"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          console.log("查询成功", msg);
          if (msg.result.length != 0) {
            const verifyInfoList = msg.result.map(item => {
              return {
                name: item.CODE_NAME,
                value: item.CODE_VALUE,
                inputValue: ""
              };
            });
            Vue.set(_this, "verifyInfoList", verifyInfoList);
            console.log(_this.verifyInfoList);
          } else {
            Vue.set(_this, "verifyInfoList", []);
          }
        }
      }
    );
    // 查询表是否存在数据
    AndroidApi.queryTableData(
      JSON.stringify({
        whereClause:
          "select * from D_CHK_INFO where CONS_NO= ? AND CHANGE_TYPE IN (1,2)",
        whereArgs: [_this.CONS_NO]
      }),
      function(msg) {
        console.log(111111111111111111111111, msg);
        if (msg.resultCode === "9999") {
          if (msg.result.length > 0) {
            _this.getCHK_DTL_INFO(msg.result[0].M_CID);
            Vue.set(_this, "M_CID", msg.result[0].M_CID);
            Vue.set(_this, "CENS_STYLE", [msg.result[0].CENS_STYLE]);
            Vue.set(_this, "VERIFY_TYPE", [msg.result[0].VERIFY_TYPE]);
            Vue.set(_this, "REMOTE_READ", msg.result[0].REMOTE_READ);
            Vue.set(_this, "REMOTE_LEVEL", msg.result[0].REMOTE_LEVEL);
            Vue.set(_this, "REMOTE_STAT", [msg.result[0].REMOTE_STAT]);
            Vue.set(_this, "VERIFY_CONC", msg.result[0].VERIFY_CONC);
            if (msg.result[0].VERIFY_CONC == "02") {
              Vue.set(_this, "radioShowY", true);
              Vue.set(_this, "radioShowN", false);
            } else {
              Vue.set(_this, "radioShowY", false);
              Vue.set(_this, "radioShowN", true);
            }
            Vue.set(_this, "isExistence_type", 2);
          } else {
            Vue.set(_this, "isExistence_type", 1);
          }
        }
      }
    );

    // 检测类型
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["mdmCensStyle"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          console.log("查询成功", msg);
          if (msg.result.length != 0) {
            const CENS_STYLE_LIST = msg.result.map(item => {
              return {
                name: item.CODE_NAME,
                value: item.CODE_VALUE
              };
            });
            Vue.set(_this, "CENS_STYLE_LIST", [CENS_STYLE_LIST]);
          } else {
            Vue.set(_this, "CENS_STYLE_LIST", []);
          }
        }
      }
    );
    // 检测形式
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["mdmVerifyType"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          console.log("查询成功", msg);
          if (msg.result.length != 0) {
            const VERIFY_TYPE_LIST = msg.result.map(item => {
              return {
                name: item.CODE_NAME,
                value: item.CODE_VALUE
              };
            });
            Vue.set(_this, "VERIFY_TYPE_LIST", [VERIFY_TYPE_LIST]);
          } else {
            Vue.set(_this, "VERIFY_TYPE_LIST", []);
          }
        }
      }
    );
    // 远传设备状态
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["mdmRemoteStat"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          console.log("查询成功", msg);
          if (msg.result.length != 0) {
            const REMOTE_STAT_LIST = msg.result.map(item => {
              return {
                name: item.CODE_NAME,
                value: item.CODE_VALUE
              };
            });
            Vue.set(_this, "REMOTE_STAT_LIST", [REMOTE_STAT_LIST]);
          } else {
            Vue.set(_this, "REMOTE_STAT_LIST", []);
          }
        }
      }
    );
  }
};
</script>
<style scoped lang="less">
@import "../../assets/less/style.less";
</style>
<style>
@import "../../assets/less/vuxStyle.less";
</style>
